/*
 * @Author: Await
 * @Date: 2025-04-23 10:15:30
 * @LastEditors: Await
 * @LastEditTime: 2025-04-23 10:15:30
 * @Description: 系列提示框配置组件
 */
import React from 'react';
import {
    Form,
    Input,
    Switch,
    Select,
    InputNumber,
    Row,
    Col,
    Typography,
    Tooltip,
    ColorPicker,
    Space
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';

interface TooltipConfig {
    show?: boolean;
    trigger?: 'item' | 'axis' | 'none';
    formatter?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderWidth?: number;
    padding?: number | number[];
    textStyle?: {
        color?: string;
        fontSize?: number;
        fontWeight?: string | number;
    };
    extraCssText?: string;
}

interface SeriesTooltipConfigProps {
    tooltipConfig?: TooltipConfig;
    onChange: (config: TooltipConfig) => void;
}

/**
 * 系列提示框配置组件
 */
const SeriesTooltipConfig: React.FC<SeriesTooltipConfigProps> = ({ tooltipConfig = {}, onChange }) => {
    // 确保配置对象存在
    const config = tooltipConfig || {};

    // 处理配置更改
    const handleConfigChange = (key: string, value: any) => {
        // 处理嵌套属性，例如 'textStyle.color'
        if (key.includes('.')) {
            const keys = key.split('.');
            let current = { ...config } as any;
            
            for (let i = 0; i < keys.length - 1; i++) {
                if (!current[keys[i]]) {
                    current[keys[i]] = {};
                }
                current = current[keys[i]];
            }
            
            current[keys[keys.length - 1]] = value;
            onChange({ ...tooltipConfig });
        } else {
            onChange({ ...config, [key]: value });
        }
    };

    // 表单项标题组件
    const FormItemLabel = ({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) => (
        <div style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                {children}
            </Typography.Text>
            {tooltip && (
                <Tooltip title={tooltip}>
                    <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12, color: '#999' }} />
                </Tooltip>
            )}
        </div>
    );

    return (
        <div className="form-container">
            <Row gutter={[16, 8]}>
                <Col span={12}>
                    <FormItemLabel tooltip="是否显示提示框">
                        显示提示框
                    </FormItemLabel>
                    <Switch
                        checked={config.show !== false}
                        onChange={checked => handleConfigChange('show', checked)}
                    />
                </Col>
                {config.show !== false && (
                    <>
                        <Col span={12}>
                            <FormItemLabel tooltip="提示框触发类型">
                                触发类型
                            </FormItemLabel>
                            <Select
                                value={config.trigger || 'item'}
                                onChange={value => handleConfigChange('trigger', value)}
                                style={{ width: '100%' }}
                                options={[
                                    { label: '数据项触发', value: 'item' },
                                    { label: '坐标轴触发', value: 'axis' },
                                    { label: '不触发', value: 'none' }
                                ]}
                            />
                        </Col>
                        <Col span={24}>
                            <FormItemLabel tooltip="提示框内容格式化，支持字符串模板和回调函数">
                                格式化模板
                            </FormItemLabel>
                            <Input
                                value={config.formatter}
                                onChange={e => handleConfigChange('formatter', e.target.value)}
                                placeholder="例如: {a} <br/>{b} : {c}"
                            />
                            <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>
                                支持的模板变量: {'{a}'} (系列名), {'{b}'} (数据名), {'{c}'} (数据值)
                            </Typography.Text>
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="提示框背景色">
                                背景色
                            </FormItemLabel>
                            <ColorPicker
                                value={config.backgroundColor || 'rgba(50,50,50,0.7)'}
                                onChange={color => handleConfigChange('backgroundColor', color.toHexString())}
                                showText
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="提示框边框颜色">
                                边框颜色
                            </FormItemLabel>
                            <ColorPicker
                                value={config.borderColor || '#333'}
                                onChange={color => handleConfigChange('borderColor', color.toHexString())}
                                showText
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="提示框边框宽度">
                                边框宽度
                            </FormItemLabel>
                            <InputNumber
                                value={config.borderWidth || 0}
                                onChange={value => handleConfigChange('borderWidth', value)}
                                min={0}
                                max={10}
                                style={{ width: '100%' }}
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="提示框内边距，单位px">
                                内边距
                            </FormItemLabel>
                            <Space.Compact style={{ width: '100%' }}>
                                <InputNumber
                                    value={typeof config.padding === 'number' ? config.padding : 5}
                                    onChange={value => handleConfigChange('padding', value)}
                                    min={0}
                                    max={20}
                                    style={{ width: '100%' }}
                                />
                            </Space.Compact>
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="提示框文字颜色">
                                文字颜色
                            </FormItemLabel>
                            <ColorPicker
                                value={config.textStyle?.color || '#fff'}
                                onChange={color => handleConfigChange('textStyle.color', color.toHexString())}
                                showText
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="提示框文字大小">
                                文字大小
                            </FormItemLabel>
                            <InputNumber
                                value={config.textStyle?.fontSize || 14}
                                onChange={value => handleConfigChange('textStyle.fontSize', value)}
                                min={10}
                                max={20}
                                style={{ width: '100%' }}
                            />
                        </Col>
                        <Col span={24}>
                            <FormItemLabel tooltip="提示框额外的CSS样式">
                                额外CSS样式
                            </FormItemLabel>
                            <Input
                                value={config.extraCssText}
                                onChange={e => handleConfigChange('extraCssText', e.target.value)}
                                placeholder="例如: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'"
                            />
                        </Col>
                    </>
                )}
            </Row>
        </div>
    );
};

export default SeriesTooltipConfig;